<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生活圈</title>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="./css/css-comment.css">
    <link rel="stylesheet" href="./css/weui.css">
    <link rel="stylesheet" href="./css/jquery-weui.css">
    <link rel="stylesheet" href="./css/lifeCircle.css">
    <script src="js/vue2.5.16.js"></script>
    <style>
        .weui-tabbar {
            position: fixed;
            bottom: 0;
            background: #fff;
        }

        .weui-toast {
            margin-left: 0;
        }
    </style>
</head>
<body>
<div id="circle" v-cloak>
    <nav class="header-nav">
        <p>
            <span @click="navTitle(0)" :class="[navIndex==0?'navActive':'']">关注</span>
            <span @click="navTitle(1)" :class="[navIndex==1?'navActive':'']">推荐</span>
        </p>
    </nav>
    <div v-show="navIndex==0" class="comment">
        <user-follow :comment="comment"></user-follow>
        <div>
            <div class="wrap-title">
                <h4>为你推荐</h4>
                <a href="##" class="more">换一批</a>
            </div>
            <div class="Recommend">
                <div class="Recommend-wrap">
                    <ul class="Recommend-ul">
                        <li class="Recommend-li" v-for="(item,index) in Recommend">
                            <div class="Recommend-img">
                                <img :src="item.img" alt="">
                            </div>
                            <p class="follow" @click="follow(index)">
                                <span v-if="item.isFollow">+</span>
                                <span class="followText">{{item.isFollow?'关注':'取消关注'}}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <user-follow :comment="comment2" style="margin-bottom: .6rem"></user-follow>
    </div>
    <div v-show="navIndex==1" class="RecommendBox clearfix">
        <header class="header-img">
            <img :src="recommendPage.banner" alt="">
        </header>
        <ul class="ul-left">
            <li @click="lifeCircle" class="recommendPage-li" v-for="(item,index) in itemsA" :key="index">
                <div class="pageImg">
                    <img :src="item.img" alt="">
                </div>
                <p class="page-title">{{item.title}}</p>
                <div class="page-user">
                    <p class="user-img">
                        <img :src="item.userImg" alt="">
                        <span class="page-name">{{item.userName}}</span>
                    </p>
                    <p class="user-zan" @click.stop="zan(0,index)">
                        <img :src=item.isFabulous?'./images/Fabulous2.png':'./images/Fabulous.png' alt="">
                        <span>{{item.zan}}</span>
                    </p>
                </div>
            </li>
        </ul>
        <ul class="ul-right">
            <li @click="lifeCircle" class="recommendPage-li" v-for="(item,index) in itemsB" :key="index">
                <div class="pageImg">
                    <img :src="item.img" alt="">
                </div>
                <p class="page-title">{{item.title}}</p>
                <div class="page-user">
                    <p class="user-img">
                        <img :src="item.userImg" alt="">
                        <span class="page-name">{{item.userName}}</span>
                    </p>
                    <p class="user-zan" @click.stop="zan(1,index)">
                        <img :src="item.isFabulous?'./images/Fabulous2.png':'./images/Fabulous.png'" alt="">
                        <span>{{item.zan}}</span>
                    </p>
                </div>
            </li>
        </ul>
        <a href="release.html" class="Release">
            <img src="./images/release.png" alt="发布">
        </a>
    </div>
    <zh-tabbar is-tab="1"></zh-tabbar>
</div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="js/tabbar.js"></script>
<script>
    Vue.component('user-follow', {
        template: `<div class="comment-list" >
                        <div v-for="(item,index) in comment">
                            <div class="com-user">
                                <div class="userImg">
                                    <img :src="item.userImg" alt="">
                                </div>
                                <div class="user-right">
                                    <p class="userName">{{item.userName}}</p>
                                    <p class="comTime">{{item.comTime}}</p>
                                </div>
                            </div>
                            <div>
                                <div v-if="comment[index].shopImg.length<=1" class="shopImg">
                                    <img v-for="item in item.shopImg" :src="item" alt="单图">
                                </div>
                                <div v-if="comment[index].shopImg.length>=2" class="shopImgWrap">
                                    <img v-for="item in item.shopImg" :src="item" alt="这是多图">
                                    <span class="allImg"
                                          v-show="comment[index].shopImg.length>=3">共{{comment[index].shopImg.length}}张</span>
                                </div>

                                <p class="com-text">{{item.Comment}}</p>
                                <div class="operation">
                                    <p class="operation-list" @click="Fabulous(index)">
                                        <img class="com-icon" :src="item.isFabulous?'./images/Fabulous2.png':'./images/Fabulous.png'"
                                             alt="">
                                        <span>{{item.FabulousNum}}</span>
                                    </p>
                                    <a href="my_comment.html" class="operation-list">
                                        <img class="com-icon" src="./images/com.png" alt="">
                                        <span v-if="item.comNum">{{item.comNum}}</span>
                                        <span v-else>评论</span>
                                    </a>
                                </div>
                            </div>
                            </div>
                        </div> `,
        props: {
            'comment': {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        methods: {
            Fabulous: function (index) { //点赞
                if (!this.comment[index].isFabulous) {
                    this.comment[index].isFabulous = !this.comment[index].isFabulous
                    this.comment[index].FabulousNum++
                } else {
                    this.comment[index].isFabulous = !this.comment[index].isFabulous
                    this.comment[index].FabulousNum--
                }
            },
        }
    })
    new Vue({
        el: "#circle",
        data: {
            navIndex: 1,
            comment: [
                {
                    userImg: './images/userImg.png', userName: "此乃用户昵称",
                    comTime: "07月30日", Comment: "上海，一家很棒的咖啡厅",
                    isFabulous: false, FabulousNum: 0, comNum: 0,
                    shopImg: [
                        "./images/tuan.png",
                    ],
                },
            ],
            comment2: [
                {
                    userImg: './images/userImg.png', userName: "此乃用户昵称",
                    comTime: "07月30日", Comment: "上海，一家很棒的咖啡厅",
                    isFabulous: false, FabulousNum: 0, comNum: 0,
                    shopImg: [
                        "./images/tuan.png",
                        "./images/tuan.png",
                    ],
                },
            ],
            Recommend: [
                {img: "./images/recommendImg.png", isFollow: true},
                {img: "./images/recommendImg.png", isFollow: false},
                {img: "./images/recommendImg.png", isFollow: false},
                {img: "./images/recommendImg.png", isFollow: false},
                {img: "./images/recommendImg.png", isFollow: false},
                {img: "./images/recommendImg.png", isFollow: false},
                {img: "./images/recommendImg.png", isFollow: false},
                {img: "./images/recommendImg.png", isFollow: false},
            ],
            recommendPage: {
                banner: "./images/banner2.png",
                list: [
                    {
                        img: "./images/img1.png", title: "确认过味道，是可以一直来 吃的店，饭菜吃起来非",
                        userImg: './images/userImg.png', userName: "呵呵哒呵呵哒呵呵哒呵呵哒",
                        zan: 0, isFabulous: false
                    }, {
                        img: "./images/img5.png", title: "确认过味道，是可以一直来 吃的店，饭菜吃起来非",
                        userImg: './images/userImg.png', userName: "呵呵哒",
                        zan: 0, isFabulous: false
                    }, {
                        img: "./images/img5.png", title: "确认过味道，是可以一直来 吃的店，饭菜吃起来非",
                        userImg: './images/userImg.png', userName: "呵呵哒",
                        zan: 0, isFabulous: false
                    }, {
                        img: "./images/img2.png", title: "确认过味道，是可以一直来 吃的店，饭菜吃起来非",
                        userImg: './images/userImg.png', userName: "呵呵哒",
                        zan: 0, isFabulous: false
                    }, {
                        img: "./images/img5.png", title: "确认过味道，是可以一直来 吃的店，饭菜吃起来非",
                        userImg: './images/userImg.png', userName: "呵呵哒",
                        zan: 0, isFabulous: false
                    }, {
                        img: "./images/img2.png", title: "确认过味道，是可以一直来 吃的店，饭菜吃起来非",
                        userImg: './images/userImg.png', userName: "呵呵哒",
                        zan: 0, isFabulous: false
                    }, {
                        img: "./images/img1.png", title: "确认过味道，是可以一直来 吃的店，饭菜吃起来非",
                        userImg: './images/userImg.png', userName: "呵呵哒",
                        zan: 0, isFabulous: false
                    }, {
                        img: "./images/img1.png", title: "确认过味道，是可以一直来 吃的店，饭菜吃起来非",
                        userImg: './images/userImg.png', userName: "呵呵哒",
                        zan: 0, isFabulous: false
                    },
                ]
            },
            itemsA: [],
            itemsB: []

        },
        computed: {},
        mounted: function () {
            this.getData()
        },
        methods: {
            follow: function (index) {
                var that = this, i = index;
                if (!this.Recommend[index].isFollow) {
                    $.toast('已取消', function () {
                        that.Recommend[i].isFollow = !that.Recommend[i].isFollow
                    })
                } else {
                    $.toast('关注成功', function () {
                        that.Recommend[i].isFollow = !that.Recommend[i].isFollow
                    })
                }
            },
            navTitle: function (index) {
                this.navIndex = index
            },
            getImg:function(url, callback) {
                var img = new Image();
                img.src = url;
                if (img.compltet) {
                    callback(img.width, img.height, Number(img.height) / Number(img.width));
                } else {
                    img.onload = function () {
                        callback(img.width, img.height, Number(img.height) / Number(img.width));
                    }
                }
            },
            //推荐--瀑布流展示
            getData() {
                let boxA = document.getElementsByClassName('ul-left')[0].clientHeight;
                let boxB = document.getElementsByClassName('ul-right')[0].clientHeight;
                var list = this.recommendPage.list;
                var that = this;
                for (var i = 0, len = list.length; i < len; i++) {
                    (function (j) {
                        that.getImg(list[j].img, function (w, h, r) {
                            boxA = document.getElementsByClassName('ul-left')[0].clientHeight;
                            boxB = document.getElementsByClassName('ul-right')[0].clientHeight;
                            if (boxA > boxB) {
                                that.itemsB.push(list[j])
                            } else {
                                that.itemsA.push(list[j])
                            }
                        })
                    })(i)
                }
            },
            zan: function (data, i) {
                switch (data) {
                    case 0:
                        if (!this.itemsA[i].isFabulous) {
                            this.itemsA[i].isFabulous = !this.itemsA[i].isFabulous;
                            this.itemsA[i].zan++
//                          console.log(this.itemsA[i].zan++)
                        } else {
                            this.itemsA[i].isFabulous = !this.itemsA[i].isFabulous;
                            this.itemsA[i].zan--;
//                          console.log('见')
//                          console.log(this.itemsA[i].zan++)
                        }
                         break;
                    case 1:
                        if (!this.itemsB[i].isFabulous) {
                            this.itemsB[i].isFabulous = !this.itemsB[i].isFabulous;
                            this.itemsB[i].zan++;
                        } else {
                            this.itemsB[i].isFabulous = !this.itemsB[i].isFabulous;
                            this.itemsB[i].zan--;
                        }
                        break;
                }
            },
            lifeCircle: function () {
                window.location.href = 'lifeCircle_detail.html'
            }
        }
    })
</script>
</html>